<template>
	<view class="brands">
		<view class="selected fs26 c3">
			精选品牌
		</view>
		<view>
			<view class="list-index" v-for="(item, index) in indexList" :key="index">
				<view class="list-tab fs22 c9">{{item.word}}</view>
				<view class="list-cell" v-for="(band,idex) in item.value" :key="idex" @click="linkBrandList">
					{{band.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import brandName from "../../json/brand.js"
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		created() {
			this.indexList = brandName.list
		},
		methods:{
			linkBrandList(){
				uni.navigateTo({
					url:"/pages/brand/brand-list"
				})
			}
		}
	}
</script>

<style scoped>
	.selected {
		padding: 32rpx 0;
		text-align: center;
	}
	
	.list-index{
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.list-tab{
		padding: 40rpx 24rpx 20rpx;
		background: #FFFFFF;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
